<script lang="ts" setup>
import { computed } from 'vue';
import { KeyValues } from '../../utils/types';

import Icon1 from '../../assets/imgs/home/1.png'
import Icon2 from '../../assets/imgs/home/2.png'
import Icon3 from '../../assets/imgs/home/3.png'
import Icon4 from '../../assets/imgs/home/4.png'
import Icon5 from '../../assets/imgs/home/5.png'
import Icon6 from '../../assets/imgs/home/6.png'

defineProps<{
  data: KeyValues
}>()

const items = computed(() => {
  return [
    { label: '今日新增注册api数', value: 175, icon: Icon1 },
    { label: '总注册数', value: 2959, icon: Icon2 },
    { label: '总平均响应时间/毫秒', value: 188, icon: Icon3 },
    { label: '实时响应时间/毫秒', value: 111, icon: Icon4 },
    { label: '今日调用次数', value: 458, icon: Icon5 },
    { label: '总调用次数', value: 3684, icon: Icon6 }
  ]
})

const cls = 'com-home-summary'
</script>

<template>
  <ul :class="cls">
    <li v-for="_ in items" :key="_.label" :class="`${cls}_item`">
      <img :class="`${cls}_icon`" :src="_.icon">
      <div>
        <div :class="`${cls}_value`">{{ _.value }}</div>
        <div :class="`${cls}_label`">{{ _.label }}</div>
      </div>
    </li>
  </ul>
</template>

<style lang="scss">
.com-home-summary {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  &_item {
    width: calc(33% - 2 * $page-padding / 3);
    margin-bottom: $page-padding;
    padding: $page-padding;
    background-color: #fff;
    display: flex;
    align-items: center;
    &:not(:nth-child(3n)) {
      margin-right: 15px;
    }
  }
  &_icon {
    width: 54px;
    margin-right: 8px;
  }
  &_value {
    font-size: 28px;
    font-weight: bold;
    color: var(--el-text-color-primary);
  }
  &_label {
    font-size: 13px;
    color: var(--el-text-color-secondary);
  }
}
</style>
